<template >
   <!-- 修改密码 -->
    <div>
        <h3 class="notitle">当前页面：{{ $route.meta.title }}</h3>
        
     <el-form  :model="form" :rules="rules"  ref="changepassword" > 
        <!--  inline-message -->

         
         <el-form-item label="原密码" prop="oldpassword"  class="item-1">
             <el-input type="password" v-model="form.oldpassword" placeholder="请输入原密码" prefix-icon="el-icon-lock" class="input-2"></el-input>
         </el-form-item>

         <el-form-item label="新密码" prop="password" class="item-2">
             <el-input type="password" v-model="form.password" placeholder="请输入密码" prefix-icon="el-icon-lock" class="input-3"></el-input>
         </el-form-item>
 
  
         <el-form-item label="重复密码" prop="passwordagin" class="item-2">
             <el-input type="password" v-model="form.passwordagin" placeholder="请重复密码" prefix-icon="el-icon-lock" class="input-4"></el-input>
         </el-form-item>

         
         <el-row >
            <el-col :span="12">
            <el-form-item>
                <el-button  type="primary" id="change-1" @click="dialogVisible = true">
                    提交
                </el-button>
                <!-- @click="submit" 绑定点击事件 -->
            </el-form-item>
            </el-col>

           
         </el-row>
            
     </el-form>
    
        <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        append-to-body
        top="20%"
        > 
        <!-- append-to-body出现不会屏幕变暗,top位置下调  -->
        <span>确认提交吗</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="change">确 定</el-button>
        </span>
        </el-dialog>
        
        <el-dialog
        title="提示"
        :visible.sync="error"
        width="30%"
        append-to-body
        top="20%"
        ><!-- append-to-body出现不会屏幕变暗,top位置下调 -->
        <span>{{ message }}</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="error = false">取 消</el-button>
            <el-button type="primary" @click="error = false">确 定</el-button>
        </span>
        </el-dialog>

    </div>
 </template>
 
 
 <script>
 import {changpassword} from '@/api/login'
 import bcrypt from 'bcryptjs'

 export default {
   
     data(){
         return{
             message:'',//后端返回的提示信息
             dialogVisible: false,
             error:false,//弹出框显示
             
             form:{
                 oldpassword:'',
                 password:'',
                 passwordagin:'',
                 id:sessionStorage.getItem("userId"),
             },//数据定义
            
             rules:{
                 oldpassword:[
                     {required:true,trigger:'blur',message:'请输入原密码'}
                 ],
                 password:[
                     {required:true,trigger:'blur',message:'请输入密码'}
                 ],
                 passwordagin:[
                     {required:true,trigger:'blur',message:'请重复密码'}//
                 ],
                 
             } //数据校验定义,rules:{}为对象变量
         }
         
     },
     methods:{
        
        //提交
        change() {
            var hash1 = bcrypt.hashSync(this.form.oldpassword, '$2a$12$c2Sr/uy88pQhDkzKhWF4we');
            // var salt = bcrypt.genSaltSync(12);    //定义密码加密的计算强度,默认10
            var hash2 = bcrypt.hashSync(this.form.password, '$2a$12$c2Sr/uy88pQhDkzKhWF4we');    //把自己的密码(this.user.password)带进去,变量hash就是加密后的密码
            
            this.$refs.changepassword.validate((valid) => {
            // 校验通过
            if (valid) {
              if(this.form.password == this.form.passwordagin){
                  changpassword({ 
                    id:this.form.id,
                    oldpassword:hash1,    
                    password:hash2,
                }).then(({ data }) => {
                        console.log(data)
                        if (data.code == 200) {
                            this.dialogVisible = false;
                            this.message = data.msg; 
                            this.error=true;
                           
                        } 
                         else{
                            this.dialogVisible = false;
                            this.message = data.msg; 
                            this.error=true;
                            // this.$message.error("注册失败");
                        }
                    })
              } else{
                 this.dialogVisible = false;
                 this.message = "两次输入的新密码不一致" 
                 this.error=true;
                //  this.$message.error("两次输入的密码不一致");
              }
           } else{
                 this.dialogVisible = false;
                 this.message = "还有未输入的信息" 
                 this.error=true;
                //  this.$message.error("还有未输入的信息");
           }
       })
     },
    
     }
}

 </script>
 
 <!-- scoped属性的作用是将当前标签下的样式私有化，仅对当前组件起作用 -->
<style scoped> 
.notitle{
    color: black;
    font-size:25px;
    margin-top: 1%; 
    margin-left: 0%;
  }/* 面包屑 */
.el-input{
    width: 260px;
    /* height: 100px; */
    border-radius: 7px 0 0 7px;/*圆框效果 */
    
} /*输入框样式 */

#title{
     color: #3e3a3a;
     margin-top: 10px;
     font-size: 45px;

 }


#change-1{
     margin-left: 600px;
     margin-top: 100px;
     width: 150px;
}/* 按钮 */

.item-1{
    margin-left: 500px;
    margin-top: 50px;
}
.item-2{
    margin-left: 500px;
    margin-top: 100px;
}/* 左边距 */

.item-1 >>> .el-form-item__label {
  font-size: 20px;
}
.item-2 >>> .el-form-item__label {
  font-size: 20px;
}
.input-1{
    margin-left: 12%;
    
}
.input-2{
    margin-left: 10%;
    
}
.input-3{
    margin-left: 10%;
    
}
.input-4{
    margin-left: 8%;
}


</style>
